<template>
  <div class="article-list">
    <div class="header">
      <h1>文章管理</h1>
      <a-button type="primary" @click="handleAdd">
        <plus-outlined /> 新增文章
      </a-button>
    </div>
    
    <a-table
      :columns="columns"
      :data-source="articleStore.articleList"
      :loading="loading"
      :pagination="{
        total: articleStore.total,
        current: current,
        pageSize: pageSize,
        onChange: handlePageChange
      }"
      row-key="id"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'status'">
          <a-tag :color="record.status === 1 ? 'green' : 'orange'">
            {{ record.status === 1 ? '已发布' : '草稿' }}
          </a-tag>
        </template>
        
        <template v-if="column.key === 'createTime'">
          {{ formatDate(record.createTime) }}
        </template>
        
        <template v-if="column.key === 'action'">
          <a-space>
            <a-button type="primary" size="small" @click="handleEdit(record)">编辑</a-button>
            <a-button type="dashed" size="small"  @click="handlePreview(record)">预览</a-button>
            <a-button danger size="small" @click="handleDelete(record)">删除</a-button>
          </a-space>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
import { useArticleStore } from '@/stores/article';
import { message } from 'ant-design-vue';
import { deleteArticle } from '@/api/article';

const router = useRouter();
const articleStore = useArticleStore();
const loading = ref(false);
const current = ref(1);
const pageSize = ref(10);

const columns = [
  {
    title: '标题',
    dataIndex: 'title',
    key: 'title',
    ellipsis: true,
    width: 200
  },
  {
    title: '摘要',
    dataIndex: 'summary',
    key: 'summary',
    ellipsis: true,
    width: 140
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 100
  },
  {
    title: '浏览量',
    dataIndex: 'viewCount',
    key: 'viewCount',
    width: 100
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    width: 170
  },
  {
    title: '操作',
    key: 'action',
    width: 220
  }
];

onMounted(() => {
  fetchArticles();
});

const fetchArticles = async () => {
  loading.value = true;
  try {
    await articleStore.getArticleList(current.value, pageSize.value);
  } finally {
    loading.value = false;
  }
};

const handlePageChange = (page: number) => {
  current.value = page;
  fetchArticles();
};

const handleAdd = () => {
  router.push('/article/edit');
};

const handleEdit = (record: any) => {
  router.push(`/article/edit/${record.id}`);
};

const handlePreview = (record: any) => {
  router.push(`/article/preview/${record.id}`);
};

const handleDelete = (record: any) => {
  deleteArticle(record.id).then(res => {
    if (res.code === 200) {
      message.success('删除成功');
      fetchArticles();
    } else {
      message.error('删除失败');
    }
  });
};

const formatDate = (dateStr: string) => {
  if (!dateStr) return '';
  const date = new Date(dateStr);
  return date.toLocaleString();
};
</script>

<style scoped>
.article-list {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
</style> 